[译] Laravel

您所在的位置：网站首页 › china (original mix) › [译] Laravel

[译] Laravel

2024-07-17 03:06| 来源: 网络整理| 查看: 265

镜像地址 : https://segmentfault.com/a/119000001504984... 原文地址: Laravel Mix Docs

概览基本示例

larave-mix 是位于webpack顶层的一个简洁的配置层，在 80% 的情况下使用 laravel mix 会使操作变的非常简单。尽管 webpack 非常的强大，但大部分人都认为 webpack 的学习成本非常高。但是如果你不必用再担心这些了呢？

看一下基本的 webpack.mix.js 文件，让我们想象一下我们现在只需要编译javascript(ES6)和sass文件：

let mix = require('laravel-mix'); mix.sass('src/app.sass', 'dist') .js('src/app.js', 'dist');

怎么样，简单吗？

　　1. 编译sass文件, ./src/app.sass 到 ./dist/app.css 　　2. 打包在 ./src/app.js 的所有js(包括任何依赖)到 ./dist/app.js。

使用这个配置文件，可以在命令行触发webpack指令：node_modules/bin/webpack

在开发模式下，并不需要压缩输出文件，如果在执行 webpack 的时候加上环境变量：export NODE_ENV=production && webpack,文件会自动压缩

less ?

但是如果你更喜欢使用Less而不是Sass呢？没问题，只要把 mix.sass() 换成 mix.less()就OK了。

使用laravel-mix，你会使发现大部分webpack任务会变得更又把握

安装

尽管 laravel-mix 对于laravel使用来说最优的，但也能被用于其他任何应用。

laravel项目

laravel已经包含了你所需要的一切，简易步骤：

　　1. 安装 laravel

　　2. 运行 npm install

　　3. 查看 webpack.mix.js 文件，就可以开始使用了.

你可以在命令行运行 npm run watch 来监视你的前段资源改变，然后重新编译。

在项目根目录下并没有 webpack.config.js 配置文件，laravel默认指向根目录下的配置文件。如果你需要自己配置它，你可以把它拷贝到根目录下，同时修改 package.json 里的npm脚本： cp node_modules/laravel-mix/setup/webpack.config.js ./.

独立项目

首先使用npm或者yarn安装laravel-mix，然后把示例配置文件复制到项目根目录下

mkdir my-app && cd my-app npm init -y npm install laravel-mix --save-dev cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

现在你会有如下的目录结构

node_modules/ package.json webpack.mix.js

webpack.mix.js 是你在webpack上层的配置文件，大部分时间你需要修改的是这个文件

首先看下 webpack.mix.js 文件

let mix = require('laravel-mix'); mix.js('src/app.js', 'dist') .sass('src/app.scss', 'dist') .setPublicPath('dist');

注意源文件的路径，然后创建匹配的目录结构(你也可以改成你喜欢的结构)。现在都准备好了，在命令行运行 node_modules/.bin/webpack 编译所有文件，然后你将会看到：

dist/app.css dist/app.js dist/mix-manifest.json(你的asset输出文件，稍后讨论)

干得漂亮！现在可以干活了。

NPM Scripts

把下面的npm脚本添加到你的 package.json 文件中可以加速你的工作操作.，laravel安装的时候已经包含了这个东西了

"scripts": { "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" } laravel工作流程

我们先回顾一下通用的工作流程以便你能在自己的项目上采用

1 . 安装laravel

laravel new my-app

2 . 安装Node依赖

npm install

3 . 配置 webpack.mix.js

这个文件所有前端资源编译的入口

let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js'); mix.sass('resources/assets/sass/app.scss', 'public/css');

默认会启用 JavaScript ES2017 + 模块绑定，就行sass编译一样。

4 . 编译

用如下指令编译

node_modules/.bin/webpack

也可以使用package.json 里的npm脚本：

npm run dev

然后会看到编译好的文件：

./public/js/app.js ./public/css/app.css

监视前端资源更改：

npm run watch

laravel自带了一个 ./resources/assets/js/components/Example.vue 文件，运行完成后会有一个系统通知。

5 . 更新视图

laravel自带一个欢迎页面，我们可以用这个来做示例，修改一下：

Laravel

刷新页面，干得漂亮！

常见问题 laravel-mix必须在laravel下使用吗？

不，在laravel下使用使最好的，但也可以用在别的任何项目

我的代码没有压缩

只有在node环境变量为生产环境时才会被压缩，这样会加速编译过程，但在开发过程中是不必要的，下面是在生成环境下运行webpack的示例

export NODE_ENV=production && webpack --progress --hide-modules

强烈推荐你把下面的npm脚本添加到你的package.json文件中，注意laravel已经包括了这些了

"scripts": { "dev": "NODE_ENV=development webpack --progress --hide-modules", "watch": "NODE_ENV=development webpack --watch --progress --hide-modules", "hot": "NODE_ENV=development webpack-dev-server --inline --hot", "production": "NODE_ENV=production webpack --progress --hide-modules" }, 我使用的是VM，webpack不能检测到我的文件变化

如果你在VM下执行 npm run dev，你会发现 webpack 并不能监视到你的文件改变。如果这样的话，有两种方式来解决这个

配置 webpack 检测文件系统的变化, 注意:检测文件系统是资源密集型操作并且很耗费电池的使用时长. 转发文件通过使用类似于 vagrant-fsnotify 之类的东西将通知发送给VM。注意，这是一个只有 Vagrant 才有的插件。

检测 VM 文件系统变化, 修改一下你的 npm 脚本，使用 --watch-poll 和 --watch 标签，像这样：

"scripts": { "watch": "NODE_ENV=development webpack --watch --watch-poll", }

推送文件改动到 VM, 在主机安装 vagrant-fsnotify

vagrant plugin install vagrant-fsnotify

现在你可以配置 vargrant 来使用这个插件, 在 Homestead 中, 在你的 Homestead.yaml 文件类似于这样

folders: - map: /Users/jeffrey/Code/laravel to: /home/vagrant/Code/laravel options: fsnotify: true exclude: - node_modules - vendor

一旦你的 vagrant 机器启动, 只需要在主机上运行 vagrant fsnotify 把文件的改动推送到 vm 上, 然后在 vm 内部运行 npm run watch 就能够检测到文件的改动了.

如果你还是有问题，去这儿溜达溜达吧。

为什么在我的css文件里显示图片在node_modules里找不到

你可能用的是相对路径，但是在你的 resources/assets/sass/app.css 里并不存在：

body { background: url('../img/example.jpg'); }

当引用相对路径的时候，会根据当前文件的路径来搜索，同样的，webpack会首先搜索 `resources/assets/img/example.jpg ，如果找不到，会继续搜索文件位置，包括node_modules,如果还找不到，就报错：

ERROR Failed to compile with 1 errors This dependency was not found in node_modules:

有两个解决办法：

1 . 让 resources/assets/img/example.jpg 存在这个文件.

2 . 编译 css 的时候添加下面的选项，禁用css的url处理：

mix.sass('resources/assets/sass/app.scss', 'public/css') .options({ processCssUrls: false });

他对老项目特别有用，因为你的文件夹结构已经完全创建好了。

我不想把mix-manifest.json文件放在项目根目录下

如果你没有使用 laravel，你的 mix-manifest.json 文件会被放到项目根目录下，如果你不喜欢的话，可以调用 mix.setPublicPath('dist/')，然后manifest文件就会被放到dist目录下。

怎样使用webpack自动加载模块

webpack 使用 ProvidePlugin 插件加载一些需要的模块，常用的一个例子就是加载 jQuery：

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }); // in a module $('#item'); // { // array of all asset paths output by webpack console.log(Object.keys(stats.compilation.assets)); });

可以在这里找到Stats对象的官方文档 : https://github.com/webpack/docs/wiki/node....

快速 webpack 配置 mix.webpackConfig({} || cb);

当然，你可以自由编辑提供的 webpack.config.js 文件，在某些设置中，更容易直接从你的 webpack.mix.js 修改或覆盖默认设置。对于Laravel应用来说尤其如此，默认情况下是在项目根文件夹中没有 webpack.config.js。

例如，你可能希望添加一个由webpack自动加载的模块的自定义数组。在这个场景中，您有两个选项:

根据需要编辑你的 webpack.config.js 文件在你的 webpack.mix.js 中调用 mix.webpackConfig() 文件，并传递重写参数。然后混合将进行一个深度合并。下面，作为一个示例，我们将为 Laravel Spark 添加一个自定义模块路径。 mix.webpackConfig({ resolve: { modules: [ 'node_modules', path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] } }); 使用回调函数

当传递回调函数时，你可以访问webpack及其所有属性。

mix.webpackConfig(webpack => { return { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }) ] }; }); 扩展 Mix

基于组件的系统 Mix 使用场景构建它的API，你也可以访问—是否为你的项目扩展Mix，或者作为一个可重用的包分发到世界。

例子 // webpack.mix.js; let mix = require('laravel-mix'); mix.extend('foo', function(webpackConfig, ...args) { console.log(webpackConfig); // the compiled webpack configuration object. console.log(args); // the values passed to mix.foo(); - ['some-value'] }); mix.js('src', 'output').foo('some-value');

在上面的示例中，我们可以看到 mix.extend() 接受两个参数:在定义组件时应该使用的名称，以及一个回调函数或类，这些函数注册并组织必要的webpack逻辑。在后台，一旦构建了底层webpack配置对象，Mix将触发这个回调函数。这将给你一个机会来插入或覆盖任何必要的设置。

虽然简单的回调函数可能对快速扩展很有用，但在大多数情况下，您可能希望构建一个完整的组件类，比如:

mix.extend( 'foo', new class { register(val) { console.log('mix.foo() was called with ' + val); } dependencies() {} webpackRules() {} webpackPlugins() {} // ... }() );

在扩展 Mix 时，通常需要触发一些指令:

安装这些依赖关系。将此规则/加载程序添加到 webpack 中。包含这个webpack插件。完全覆盖webpack配置的这一部分。将此配置添加到Babel。等。

这些操作中的任何一个都是带有 Mix 组件系统有联系。

组件的接口

name:当调用组件时，应该使用什么作为方法名。(默认为类名。) dependencies:列出应该由Mix安装的所有npm依赖项。 register:当您的组件被调用时，所有的用户参数将立即被传递给这个方法。 boot:启动组件。这个方法是在用户的webpack.mix之后触发的。js文件已经加载完毕。 webpackEntry:附加到主混合webpack入口对象。 webpackRules:与主webpack加载器合并的规则。 webpackplugin:与主webpack配置合并的插件。 webpackConfig:覆盖生成的webpack配置。 babelConfig:额外的Babel配置应该与Mix的默认值合并。

这里有一个示例/虚拟组件，它可以让你更好地了解如何构建自己的组件。更多的例子，请参考在后台Mix 使用的组件。

class Example { /** * The optional name to be used when called by Mix. * Defaults to the class name, lowercased. * * Ex: mix.example(); * * @return {String|Array} */ name() { // Example: // return 'example'; // return ['example', 'alias']; } /** * All dependencies that should be installed by Mix. * * @return {Array} */ dependencies() { // Example: // return ['typeScript', 'ts']; } /** * Register the component. * * When your component is called, all user parameters * will be passed to this method. * * Ex: register(src, output) {} * Ex: mix.yourPlugin('src/path', 'output/path'); * * @param {*} ...params * @return {void} * */ register() { // Example: // this.config = { proxy: arg }; } /** * Boot the component. This method is triggered after the * user's webpack.mix.js file has executed. */ boot() { // Example: // if (Config.options.foo) {} } /** * Append to the master Mix webpack entry object. * * @param {Entry} entry * @return {void} */ webpackEntry(entry) { // Example: // entry.add('foo', 'bar'); } /** * Rules to be merged with the master webpack loaders. * * @return {Array|Object} */ webpackRules() { // Example: // return { // test: /\.less$/, // loaders: ['...'] // }); } /* * Plugins to be merged with the master webpack config. * * @return {Array|Object} */ webpackPlugins() { // Example: // return new webpack.ProvidePlugin(this.aliases); } /** * Override the generated webpack configuration. * * @param {Object} webpackConfig * @return {void} */ webpackConfig(webpackConfig) { // Example: // webpackConfig.resolve.extensions.push('.ts', '.tsx'); } /** * Babel config to be merged with Mix's defaults. * * @return {Object} */ babelConfig() { // Example: // return { presets: ['react'] }; }

请注意，上面示例中的每个方法都是可选的。在某些情况下，您的组件可能只需要添加一个webpack加载程序和/或调整混合使用的Babel配置。没有问题的话省略其余的接口。

class Example { webpackRules() { return { test: /\.test$/, loaders: [] }; } }

现在，当 Mix 构造底层 webpack 配置时，你的规则将包含在生成的webpackConfig.module.rules 数组中。

使用

一旦你构建或安装了想要的组件，只需从 webpack.mix.js 中获取它即可，你都准备好了。

// foo-component.js let mix = require('laravel-mix'); class Example { webpackRules() { return { test: /\.test$/, loaders: [] }; } } mix.extend('foo', new Example()); // webpack.mix.js let mix = require('laravel-mix'); require('./foo-component'); mix .js('src', 'output') .sass('src', 'output') .foo(); 自定义方法 LiveReload

当Laravel Mix 与 Browsersync 已经支持了开箱即用，你可能更喜欢使用LiveReload, 当检测到修改时，LiveReload可以自动监视您的文件并刷新页面。

安装 webpack-livereload-plugin npm install webpack-livereload-plugin@1 --save-dev 配置 webpack.mix.js

将以下几行添加到 webpack.mix.js 底部。

var LiveReloadPlugin = require('webpack-livereload-plugin'); mix.webpackConfig({ plugins: [ new LiveReloadPlugin() ] });

虽然 LiveReload 有她很好用的默认值，但是这里可以查看一个可用的插件选项列表。

安装 LiveReload.js

最后，我们需要安装LiveReload.js。您可以通过 LiveReload Chrome 插件，或者在你的主要站点模板的关闭

本作品采用《CC 协议》，转载必须注明作者和本文链接

【本文地址】

[译] Laravel

[译] Laravel

今日新闻

推荐新闻